<template>
  <div class="tabbar-container">
    <!-- 子路由出口 -->

    <keep-alive exclude="userVideo">
      <router-view />
    </keep-alive>
    <!--
      标签栏支持路由模式，用于搭配vue-router使用。路由模式下会匹配页面路径和标签的to属性，并自动选中对应的标签
     -->
    <van-tabbar
      fixed
      class="tabbar"
      :style="active===0||active===1?'opacity:0.7':''"
      v-model="active"
      route
      active-color='#fff'
      inactive-color='#8a8a8a'
    >
      <van-tabbar-item
        icon="home-o"
        to="/"
      >
        <span>推荐</span>
        <van-icon slot="icon"></van-icon>
      </van-tabbar-item>
      <van-tabbar-item
        icon="comment-o"
        :to="user?'/recommond':'/login'"
      >
        <span>关注</span>
        <span
          v-if="UserInfo.newFocuVideos"
          class="isNew"
        >{{UserInfo.newFocuVideos}}</span>
        <van-icon slot="icon"></van-icon>
      </van-tabbar-item>
      <van-tabbar-item
        icon="video-o"
        :to="user?'/shootvideo':'/login'"
      >
        <span>拍视频</span>
        <van-icon slot="icon"></van-icon>
      </van-tabbar-item>
      <van-tabbar-item
        icon="video-o"
        :to="user?'/message':'/login'"
      >
        <span>消息</span>
        <span
          v-if="newNum"
          class="isNew"
        >{{newNum}}</span>
        <van-icon slot="icon"></van-icon>
      </van-tabbar-item>
      <van-tabbar-item
        icon="user-o"
        to='/my'
      >
        <span>{{ user ? "我的" : "未登录" }}</span>
        <van-icon slot="icon"></van-icon>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>

import { mapGetters, mapState } from 'vuex'
import { getUserMessage, getUserInfo } from '@/api/user'

export default {
  name: 'TabBar',
  components: {},
  props: {},
  data () {
    return {
      active: 0,
      UserInfo: {}
    }
  },
  computed: {
    ...mapState(['user']),
    ...mapGetters(['messages', 'messageTotal']),
    newNum () {
      let newNum = 0
      this.messages.find(v => {
        if (v.isNewMessage) { newNum = newNum + v.isNewMessage; return v }
      })
      return newNum
    }
  },
  watch: {
    messages: {
      handler (val) {
      }
    }
  },
  created () {
    document.oncontextmenu = function () {
      return false
    }
    setInterval(() => {
      if (this.user) {
        this.onLoadMessage()
        this.loadUser()
      }
    }, 4000)
    this.onLoadMessage()
  },
  methods: {
    async onLoadMessage () {
      if (this.user) {
        try {
          const res2 = await getUserMessage(this.user.userid)
          // 按时间排序
          const messages = res2.data.data.messages.sort(function (a, b) {
            const value1 = new Date(a.content[a.content.length - 1].publictime)
            const value2 = new Date(b.content[b.content.length - 1].publictime)
            return value2 - value1
          })
          this.$store.dispatch('message/initMessage', messages)
          this.$store.dispatch('message/setMessageTotal', res2.data.meta.msg)
        } catch (error) {
        }
      }
    },
    async loadUser () {
      const res = await getUserInfo(this.user.userid)
      this.UserInfo = res.data.data
    }
  }
}
</script>

<style scoped>
.tabbar {
  height: 50px;
  background: #010101;
  z-index: 100000;
}
.van-tabbar-item--active {
  background: #010101;
}
span {
  font-size: 16px;
}
.isNew {
  z-index: 999999999999999999;
  position: absolute;
  top: 5px;
  background-color: rgb(250, 206, 21);
  width: 20px;
  height: 20px;
  border-radius: 20px;
  text-align: center;
  line-height: 20px;
  color: #fff;
}
</style>
